<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="24">
            <a-form-item label="订单编号">
              <el-input placeholder="请输入订单编号" v-model="queryParam.orderSn" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="客户名称">
              <el-input placeholder="请输入客户名称" v-model="queryParam.storeCode" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <!--          <a-col :xl="3" :lg="7" :md="8" :sm="24">
                      <a-input placeholder="请输入供应商名称" v-model="queryParam.gysName" style="width: 100%"></a-input>
                    </a-col>-->
          <a-col :md="6" :sm="24">
            <a-form-item label="订单状态">
              <el-select placeholder="请选择订单状态" style="width: 100%" v-model="queryParam.status">
                <el-option label="全部订单" value=""></el-option>
                <el-option label="已支付" value="1"></el-option>
                <el-option label="已接单" value="3"></el-option>
                <el-option label="等待面料" value="4"></el-option>
                <el-option label="裁剪" value="5"></el-option>
                <el-option label="缝制" value="6"></el-option>
                <el-option label="发货" value="7"></el-option>
                <el-option label="订单完成" value="8"></el-option>
                <el-option label="售后" value="9"></el-option>
                <el-option label="已驳回" value="10"></el-option>
                <el-option label="未付款" value="11"></el-option>
                <el-option label="售后完成" value="12"></el-option>
              </el-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="创建时间">
              <el-date-picker
                type="daterange"
                range-separator="~"
                start-placeholder="开始"
                end-placeholder="结束"
                placeholder="选择日期"
                @blur="formatD(form.date)"
                v-model="form.date"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </a-form-item>
            <!--            <j-date placeholder="开始日期" v-model="queryParam.date" style="width: 100%"></j-date>-->
          </a-col>

          <!--          <a-col :xl="3" :lg="7" :md="8" :sm="24">
                      <j-date placeholder="开始日期" v-model="queryParam.date" style="width: 100%"></j-date>
                    </a-col>

                    <a-col :xl="3" :lg="7" :md="8" :sm="24">
                      <j-date placeholder="结束日期" v-model="queryParam.enddate" style="width: 100%"></j-date>
                    </a-col>-->

          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="form.date = '';searchReset()" icon="reload"
                          style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!--table区域-begin-->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="30px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="gotodetail(record.orderSn)">查看详情</a>
          <a style="margin-left: 8px;" @click="fahuo(record.orderSn)" v-if="record.status>='3' && record.status<'8'">立即发货</a>
          <a style="margin-left: 8px;" v-if="Number(record.status) >= 1 && record.status != '11'"
             @click="$router.push({path:'/orderCenter/SingleCBList',query:{orderSn:record.orderSn}})">订单成本</a>
          <!-- <a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>-->
          <a-popconfirm style="margin-left: 8px" v-show="record.status=='1'" title="确定接单吗?"
                        @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即派单</a>
          </a-popconfirm>

           <a-popconfirm style="margin-left: 8px"
                         v-show="record.status>='3' && record.status!='8' && record.status!='11'" title="确定完结吗?"
                         @confirm="() => orderok(record.orderSn)">
                    <a style="color:deepskyblue">完成订单</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>

<!--    <lgyxCreditRate-modal ref="modalForm" @ok="modalFormOk"></lgyxCreditRate-modal>-->
    <!--立即发货-->
    <a-modal
      title="订单发货"
      v-model:visible="visible2"
      @ok="fahuoNow"
    >
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="选择产品">
          <a-select
            v-model="fahuoProid"
            mode="multiple"
            placeholder="请选择需要发货的产品"
          >
            <a-select-option :label="item.pingleiName" :value="item.id" v-for="(item,key) in producelistdata"
                             :key="item.id">
              {{ item.pingleiName }}
            </a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item label="发货方式">
          <a-select
            v-model:value="courierid"
            placeholder="请选择快递方式"
          >
            <a-select-option :label="item.courierName" :value="item.id" v-for="(item,key) in getKuaidiList"
                             :key="item.id">
              {{ item.courierName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="运单编号">
          <a-input v-model="yunNumber"/>
        </a-form-item>

        <a-form-item label="备注信息">
          <a-input v-model="fahuoRemark"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!--弹框结束-->
    <paidanSupplierList ref="seepaidanSupplierList"></paidanSupplierList>
  </a-card>
</template>

<script>
import paidanSupplierList from './modules/paidanSupplierList';
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import {getAction} from "../../api/manage";

export default {
  name: 'SingleOrder',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate,
    paidanSupplierList
    // LgyxCreditRateModal
  },
  data() {
    return {
      // 发货的产品id
      fahuoProid: [],
      producelistdata: [], // 产品列表
      form: {
        date: ''
      },
      courierid: '', // 发货选中的快递id
      getKuaidiList: [], // 快递列表
      fahuoRemark: '',// 发货的备注
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      yunNumber: '', // 立即发货的运单编号
      wuliuCode: '', //物流单号
      orderSn: '', // 选中的个订订单号
      visible: false, // 右边弹框的显示
      description: '个订订单',
      productInfoList: [], // 当前的个订订单详情（产品列表）
      orderDetail: {}, // 订单详情（也就是列表里单条记录的基本信息）
      visible2: false, // 发货弹框的显示
      fahuoOrderSn: '', // 立即发货的订单编号
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '客户编号',
          align: "center",
          dataIndex: 'companyCode'
        },
        {
          title: '客户名称',
          align: "center",
          dataIndex: 'companyName'
        },
        {
          title: '顾客姓名',
          align: "center",
          dataIndex: 'customerName'
        },
        {
          title: '订单编号',
          align: "center",
          dataIndex: 'orderSn'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createTime'
          /* customRender: (text) => {
             //字典值替换通用方法
             return filterDictTextByCache('sex', text);
           }*/
        },
        {
          title: '订单金额',
          align: "center",
          dataIndex: 'orderMoney'
        },
        {
          title: '当前订单状态',
          align: "center",
          dataIndex: 'status',
          customRender: function (text) {
            if (text == '11') {
              return '未支付'
            } else if (text == '1') {
              return '已支付'
            } else if (text == '2') {
              return '已提交'
            } else if (text == '3') {
              return '已接单'
            } else if (text == '4') {
              return '等待面料'
            } else if (text == '5') {
              return '剪裁'
            } else if (text == '6') {
              return '缝制'
            } else if (text == '7') {
              return '发货'
            } else if (text == '8') {
              return '订单完成'
            } else if (text == '9') {
              return '售后'
            } else if (text == '10') {
              return '已驳回'
            } else if (text == '12') {
              return '售后完成'
            }
          }
        },
        {
          title: '订单操作处理',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        orderOk: '/orderCenter/orderOk', // 订单完成
        list: '/orderCenter/getSingleOrder',
        orderNow: '/orderCenter/orderNow', // 面料立即接单
        orderNowSingle: '/orderCenter/orderNowSingle', // 个订立即接单
        theGoods: '/orderCenter/theGoods', // 确认收货
        SingleOrderDetail: '/orderCenter/SingleOrderDetail', // 个订订单详情
        fahuoNow: '/orderCenter/fahuoNow', // 立即发货
        getKuaidi: '/orderCenter/getKuaidi', // 快递列表
        productList: '/fabricAndOther/productListfa', // 订单下产品列表（用于产品发货）
      },
      dictOptions: {},
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {
    this.getKuaidiFunc()
  },
  methods: {

    /**
     * 获取产品列表
     * @param orderSn 订单编号
     */
    productListFunc(orderSn) {
      getAction(this.url.productList, {
        'orderSn': orderSn
      }).then(res => {
        if (res.code == '0') {
          this.producelistdata = res.data
        }
      })
    },

    formatD(array) {
      this.queryParam.date = array[0]
      this.queryParam.enddate = array[1]
      // alert(this.queryParam.date)
    },

    // 订单完成
    orderok(orderSn) {
      getAction(this.url.orderOk, {
        'orderSn': orderSn, // 选中的订单编号
        'type': 1
      }).then(res => {
        if (res.code == '0') {
          this.$message.success('操作成功')
          this.loadData();
        } else {
          this.$message.error('操作失败')
        }
      })
    },

    /**
     * 获取快递信息
     */
    getKuaidiFunc() {
      getAction(this.url.getKuaidi).then(res => {
        if (res.code == '0') {
          this.getKuaidiList = res.data
        }
      })
    },


    // 清除发货数据
    clearFaData() {
      this.fahuoProid = []
    },

    /**
     * 立即发货
     * @author zxl
     */
    fahuoNow() {
      if (this.yunNumber == '') {
        this.$message.error("请输入运单号")
        return;
      } else {
        getAction(this.url.fahuoNow, {
          'orderSn': this.fahuoOrderSn,
          'yunNumber': this.yunNumber,
          'orderType': 1,
          'kuaidiid': this.courierid,
          'remark': this.fahuoRemark,
          'productid': this.fahuoProid.toString()
        }).then(res => {
          if (res.code == '0') {
            this.clearFaData()
            this.$message.success("发货成功")
            this.loadData()
          } else {
            this.clearFaData()
            this.$message.error("发货失败")
          }
          this.visible2 = false
        })
      }
    },

    /**
     * 点击发货，现实发货弹窗，获取当前订单编号
     * @author zxl
     * @param orderSn 订单编号
     */
    fahuo(orderSn) {
      this.visible2 = true
      this.fahuoOrderSn = orderSn
      // 获取订单的产品列表
      this.productListFunc(orderSn)
    },

    //查看派单的供应商列表
    seepaidanSupplierList: function (record) {
      this.$refs.seepaidanSupplierList.edit(record, 1);
      this.$refs.seepaidanSupplierList.title = "派单";
      this.$refs.seepaidanSupplierList.disableSubmit = false;
    },

    // 前往订单详情界面
    gotodetail(orderSn) {
      this.$router.push({path: '/orderCenter/singleDetail', query: {order: orderSn}})
    },
    theGoods(orderSn) {// 确认收货
      getAction(this.url.theGoods, {'orderSn': orderSn}).then(res => {
        if (res.code == '200') {
          this.$message.success("操作成功")
        } else {
          this.$message.error("操作失败")
        }
        this.loadData()
      })
    },
    // 个订订单立即接单
    orderNow(orderSn) {
      getAction(this.url.orderNowSingle, {'orderSn': orderSn}).then(res => {
        if (res.code == '0') {
          this.$message.success("接单成功")
        } else if (res.code == '-1') {
          this.$message.warning("有产品还没有选择供应商")
        } else {
          this.$message.error("订单不存在或已接单")
        }
        this.loadData()
      })
    },
    // 判断订单状态
    getStatus(text) {
      if (text == '11') {
        return '未支付'
      } else if (text == '1') {
        return '已支付'
      } else if (text == '2') {
        return '已提交'
      } else if (text == '3') {
        return '已接单'
      } else if (text == '4') {
        return '等待面料'
      } else if (text == '5') {
        return '剪裁'
      } else if (text == '6') {
        return '缝制'
      } else if (text == '7') {
        return '发货'
      } else if (text == '8') {
        return '订单完成'
      } else if (text == '9') {
        return '售后'
      }
    },
    // 判断售后方式
    getAfterType(text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    },
    initDictConfig() {
    },
    // 下面三个是详情弹框的方法
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(record) { // 打开了侧边抽屉
      this.orderSn = record.orderSn
      this.orderDetail = record // 传进来的订单基本信息
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.productInfoList = []
    },
    // 开始查询订单的详情啦~~~
    getOrderDetail() {
      getAction(this.url.SingleOrderDetail, {
        'token': '88411883', // token
        'orderSn': this.orderSn, // 选中的订单编号
      }).then(res => {
        this.productInfoList = res.data.productInfoList //拿到产品列表
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.fabricName {
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  display: block !important;
  background: #2d2d2d;
  color: #ffe56d;
  text-align: center;
  border-radius: 3px;
}

.fabigtitle {
  height: 34px;
  width: 200px;
  text-align: left;
}

.fabigcontent {
  height: 34px;
  width: 200px;
  text-align: right;
}

.fatitle {
  height: 34px;
  width: 82px;
  background: rgb(242 242 242);
  text-align: center;
}

.facontent {
  width: 180px;
  overflow: hidden;
  text-align: center;
}
</style>